<template>
  <div id="main" style="width: 100%;height: 300px;"> </div>
  <div class="chaxun">
    <el-table :data="tableData.list" height="600" style="width: 95%;margin:0 auto;" highlight-current-row>
      <el-table-column prop="id" label="用户ID" width="180" />
      <el-table-column prop="name" label="用户昵称" width="140" />
      <el-table-column prop="bushu" label="走步步数" width="180" />
      <el-table-column prop="shichang" label="走步时长" width="180" />
      <el-table-column prop="juli" label="走步距离" width="180" />
      <el-table-column prop="reliang" label="消耗热量" width="180" />
      <el-table-column prop="address" label="操作">
        <template #default="scope">
          <el-button link type="primary" size="small" @click.prevent="chakan(scope.row)">查看</el-button>
          <el-button link type="primary" size="small" @click.prevent="deleteRow(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script setup>
  import * as echarts from 'echarts';

import { onMounted, reactive, ref } from 'vue'
import { useCounterStore } from '../../stores/counter';
import { useRouter } from "vue-router";

const router = useRouter();
// 点击查看跳转路由并且传参
const chakan = (row) => {
  router.push({ path: '/maxindex/compilethree.vue/', query: { id: JSON.stringify(row) } })
}

var tableData = reactive({ list: [] });

const store = useCounterStore();
let data1 = ref(JSON.parse(store.count));
// console.log(data1._rawValue.list);

//定义响应式数据    
onMounted(() => {
  tableData.list = data1._rawValue.list;

var chartDom = document.getElementById('main');
var myChart = echarts.init(chartDom);
var option;

option = {
  title: {
    text: '步数统计'
  },
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'cross',
      label: {
        backgroundColor: '#6a7985'
      }
    }
  },
  legend: {
    data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine']
  },
  toolbox: {
    feature: {
      saveAsImage: {}
    }
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  xAxis: [
    {
      type: 'category',
      boundaryGap: false,
      data: ['雷涛', '张霞', '梁敏', '苏娟', '邵桂英', '吕强', '苏刚']
    }
  ],
  yAxis: [
    {
      type: 'value'
    }
  ],
  series: [
    {
      name: 'Email',
      type: 'line',
      stack: 'Total',
      areaStyle: {},
      emphasis: {
        focus: 'series'
      },
      data: [120, 132, 101, 134, 90, 230, 210]
    },
    {
      name: 'Union Ads',
      type: 'line',
      stack: 'Total',
      areaStyle: {},
      emphasis: {
        focus: 'series'
      },
      data: [220, 182, 191, 234, 290, 330, 310]
    },
    {
      name: 'Video Ads',
      type: 'line',
      stack: 'Total',
      areaStyle: {},
      emphasis: {
        focus: 'series'
      },
      data: [150, 232, 201, 154, 190, 330, 410]
    },
    {
      name: 'Direct',
      type: 'line',
      stack: 'Total',
      areaStyle: {},
      emphasis: {
        focus: 'series'
      },
      data: [320, 332, 391, 420, 500, 700, 900]
    },
    {
      name: 'Search Engine',
      type: 'line',
      stack: 'Total',
      label: {
        show: true,
        position: 'top'
      },
      areaStyle: {},
      emphasis: {
        focus: 'series'
      },
      data: [500, 600, 800, 1000, 1100, 1200, 1320]
    }
  ]
};

option && myChart.setOption(option);

})

const deleteRow = (www) => {
  let a = tableData.list.findIndex((item) => {
    return item.id == www.id;
    // console.log(www);
  });
  if (a != -1) {
    tableData.list.splice(a, 1);
  }
};


//定义函数
// var deleteRow = (row) => {
//   axios.post('/api/user/delete', { id: row.id }).then((res) => {
//     console.log('delete', res.data);
//     tableData.list = res.data.list;
//   })
// }

</script>

<style  scoped>
.el-main {
  margin: 0 auto;
}
</style>